<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>未通过采购信息</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../../static/js/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <script src="../../static/js/utils.js"></script>
</head>
<style>
    .el-row {
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .el-col {
        border-radius: 4px;
    }

    #app {
        width: 94%;
        margin-left: 2%;
        text-align-last: center;
    }
</style>

<body>
    <div id="app">
        <el-dialog title="修改零件" :visible.sync="formShow1">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px">
                <el-form-item label="零件名称" prop="partName">
                    <el-input disabled v-model="form.partName"></el-input>
                </el-form-item>
                <el-form-item label="成本价" prop="costPrice">
                    <el-input type="number" v-model="form.costPrice" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="厂家折扣" prop="rebate">
                    <el-input disabled type="number" v-model="form.rebate" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item type="number" label="个数" prop="buyCount">
                    <el-input v-model="form.buyCount" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="总金额" prop="totalPrice">
                    <el-input disabled type="number" v-model="form.totalPrice" autocomplete="off" readonly></el-input>
                </el-form-item>
                <el-form-item label="供应商" prop="producerTable_id">
                    <el-select disabled v-model="form.producerTable_id" placeholder="请选择">
                        <el-option v-for="item in producerTable" :key="item.id" :label="item.producerName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="formShow = false">取 消</el-button>
                    <el-button type="primary" @click="updateForm('form')">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="供应商" :visible.sync="formShow3" width="70%">
            <el-button @click="oppenAddProducertable" type="text" size="medium">添加供应商</el-button>
            <el-table :data="producerTableData">
                <el-table-column prop="producerName" label="供应商名称">
                </el-table-column>

                <el-table-column prop="linkman" label="联系人">
                </el-table-column>

                <el-table-column prop="phoneNumber" label="联系电话">
                </el-table-column>
                <el-table-column prop="address" label="联系地址">
                </el-table-column>
                <el-table-column prop="remark" label="备注">
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="150">
                    <template slot-scope="scope">
                        <el-button type="text" @click="oppenUpdateProducertable(scope.$index,producerTableData)"
                            size="small">修改</el-button>
                        <el-button type="text" @click="deleteProducertable(scope.$index,producerTableData)"
                            size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage1" :page-sizes="[5, 10, 15, 20]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </el-dialog>
        <el-dialog title="添加供应商" :visible.sync="formShow4">
            <el-form :model="producerTableForm" :rules="rulesProducerTable" ref="producerTableForm" label-width="100px">
                <el-form-item label="供应商名称" prop="producerName">
                    <el-input v-model="producerTableForm.producerName"></el-input>
                </el-form-item>
                <el-form-item label="联系人" prop="linkman">
                    <el-input v-model="producerTableForm.linkman" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="phoneNumber">
                    <el-input v-model="producerTableForm.phoneNumber" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系地址" prop="address">
                    <el-input v-model="producerTableForm.address" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="producerTableForm.remark" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="formShow = false">取 消</el-button>
                    <el-button type="primary" @click="addProducertable('producerTableForm')">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <div v-show="table1">
            <el-row :gutter="20">
                <el-col :span="12" :offset="8">
                    <h1 style="color: rgb(78, 78, 250);margin-left: -40%;">未通过采购信息</h1>
                </el-col>
            </el-row>

            <el-table :data="tableData" border style="width: 100%;height: 330px;">
                <el-table-column prop="requestBuyer" label="采购申请人">
                </el-table-column>
                <el-table-column prop="requestTime" label="采购申请时间">
                    <template slot-scope="scope">
                        {{ new Date(scope.row.requestTime).toLocaleDateString() }}
                    </template>
                </el-table-column>
                <el-table-column prop="totalPrice" label="总金额">
                </el-table-column>
                <el-table-column prop="managerFeedbackInfo" label="反馈信息">
                </el-table-column>
                <el-table-column label="采购详情">
                    <template slot-scope="scope">
                        <el-button @click="details(1,scope.$index,tableData)" type="text" size="small">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage1" :page-sizes="[5, 10, 15, 20]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
        <div v-show="table2">
            <el-row :gutter="20">
                <el-col :span="12" :offset="8">
                    <h1 style="color: rgb(78, 78, 250);margin-left: -40%;">重新拟定采购计划</h1>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="6">
                    申请人：{{requestBuyer}}
                </el-col>
                <el-col :span="6" :offset="2">
                    申请日期：{{new Date(requestTime).toLocaleDateString()}}
                </el-col>

                <el-col :span="6" style="margin-left: 7%">
                    <el-button @click="upCode" type="text" size="medium">提交</el-button>
                </el-col>
                <el-col :span="2">
                    <el-button @click="back" type="text" size="medium">返回</el-button>
                </el-col>
            </el-row>

            <el-table :data="tableData3" border style="width: 100%;height:330px">
                <el-table-column prop="partcode" label="零件编号" width="150">
                </el-table-column>
                <el-table-column prop="partname" label="零件名称" width="150">
                </el-table-column>
                <el-table-column prop="partplacecode" label="货位号" width="150">
                </el-table-column>
                <el-table-column prop="partunit" label="单位" width="150">
                </el-table-column>
                <el-table-column prop="producername" label="生产商" width="150">
                </el-table-column>
                <el-table-column prop="buycount" label="采购数量" width="150">
                </el-table-column>
                <el-table-column prop="partCreater" label="拟定计划人" width="150">
                </el-table-column>
                <el-table-column prop="partCreateDate" label="拟定计划时间" width="150">
                    <template slot-scope="scope">
                        {{ new Date(scope.row.partCreateDate).toLocaleDateString() }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="150">
                    <template slot-scope="scope">
                        <el-button type="text" @click="updateCar(scope.$index,tableData3)" size="small">修改</el-button>
                        <el-button type="text" @click="deleteCar(scope.$index,tableData3)" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage1" :page-sizes="[5, 10, 15, 20]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>

    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            var clientNameRules = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入采购数量'));
                } else {
                    this.form.totalPrice = this.form.buyCount * this.form.costPrice;
                    callback();
                }
            };
            var clientNameRules2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入进货价格'));
                } else {
                    this.form.totalPrice = this.form.buyCount * this.form.costPrice;
                    callback();
                }
            };
            var clientNameRules3 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入零件名称'));
                } else {
                    let _this = this;
                    selectAjax("POST", "/buytable/car", { name: _this.form.partName }, (data) => {
                        if (data.msg == "已有零件") {
                            callback(new Error(data.msg));
                        } else {
                            callback();
                        }
                    })

                }
            };
            var clientNameRules4 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入库存量'));
                } else {
                    if (this.form.partStore < this.form.partMinStore) {
                        callback(new Error('不能小于最小库存量'));
                    } else {
                        callback();
                    }
                }
            };

            return {
                id: 0,
                lid: 0,
                cid: 0,
                page: 1,
                limit: 5,
                total: 0,
                partPlaceCode: '',
                currentPage1: 1,
                tableData: [],
                tableData3: [],
                producerTableData: [],

                table1: true,
                table2: false,
                status: 0,
                tableIndex: 0,
                requestBuyer: '',
                requestTime: '',
                formShow: false,
                formShow1: false,
                formShow2: false,
                formShow3: false,
                formShow4: false,
                producerState: 0,
                producerTable: {},
                producerTableForm: {
                    id: '',
                    producerName: '',
                    linkman: '',
                    phoneNumber: '',
                    address: '',
                    remark: ''
                },
                form: {
                    id: '',
                    userId: '',
                    costPrice: '',
                    buyCount: '',
                    totalPrice: '',
                    producerTable_id: '',
                    partName: '',
                    partUnit: '',
                    partCode: '',
                    partCubage: '',
                    partWeight: '',
                    partStore: '',
                    partMinStore: '',
                    salePrice: '',
                    rebate: '',
                    details: '',
                },

                rulesProducerTable: {
                    producerName: [
                        { required: true, message: '供应商不能为空', trigger: 'blur' },
                    ],
                    linkman: [
                        { required: true, message: '请输入联系人', trigger: 'blur' },
                    ],
                    phoneNumber: [
                        { required: true, message: '请输入联系电话', trigger: 'blur' },
                    ],
                    address: [
                        { required: true, message: '请输入地址', trigger: 'blur' },
                    ],
                    remark: [
                        { required: true, message: '请输入备注', trigger: 'blur' },
                    ],
                },
                rules: {
                    partName: [
                        { required: true, validator: clientNameRules3, trigger: 'blur' },
                    ],
                    partCubage: [
                        { required: true, message: '请输入零件体积', trigger: 'blur' },
                    ],
                    partWeight: [
                        { required: true, message: '请输入零件重量', trigger: 'blur' },
                    ],
                    partStore: [
                        { required: true, validator: clientNameRules4, trigger: 'blur' },
                    ],
                    partMinStore: [
                        { required: true, validator: clientNameRules4, trigger: 'blur' },
                    ],
                    salePrice: [
                        { required: true, message: '请输入销售价', trigger: 'blur' },
                    ],
                    rebate: [
                        { required: true, message: '请输入厂家折扣', trigger: 'blur' },
                    ],
                    partUnit: [
                        { required: true, message: '请选择单位', trigger: 'blur' }
                    ],

                    buyCount: [
                        { required: true, validator: clientNameRules, trigger: 'blur' }
                    ],
                    costPrice: [
                        { required: true, validator: clientNameRules2, trigger: 'blur' }
                    ],
                    producerTable_id: [
                        { required: true, message: '请选择供应商', trigger: 'change' }
                    ]
                }
            }
        },
        methods: {
            select() {
                let _this = this;
                selectAjax("post", '/buytable/list', { state: '1', page: _this.page, limit: _this.limit }, _this.tableData2);
            },
            selectDetails() {
                let _this = this;
                selectAjax("post", '/buytable/details', { state: '1', id: _this.id, page: _this.page, limit: _this.limit }, _this.tableData4);
            },
            tableData2(data) {
                this.tableData = data.data.data;
                this.total = data.data.total;
            },
            tableData4(data) {
                this.tableData3 = data.data.data;
                this.total = data.data.total;
            },

            getproducerTableData(data) {
                this.producerTableData = data.data.data;
                this.status = 3;
                this.total = data.data.total;
            },
            handleSizeChange(val) {
                this.limit = val;
                if (this.status == 0) {
                    this.select();
                } else if (this.status == 1) {
                    this.selectDetails();
                } else if (this.status == 3) {
                    this.selectProducertable();
                }
            },
            handleCurrentChange(val) {
                this.page = val;
                if (this.status == 0) {
                    this.select();
                } else if (this.status == 1) {
                    this.selectDetails();
                } else if (this.status == 3) {
                    this.selectProducertable();
                }
            },
            closePage() {
                this.page = 1;
                this.limit = 5;
                this.total = 0;
                this.currentPage1 = 1;
            },
            details(state, index, data) {
                this.requestBuyer = data[index].requestBuyer;
                this.requestTime = data[index].requestTime;
                this.id = data[index].id;
                this.closePage();
                if (state == 1) {
                    this.status = 1;
                    this.table1 = false;
                    this.table2 = true;
                    this.selectDetails();
                }
            },
            back() {
                this.status = 0;
                this.table1 = true;
                this.table2 = false;
                this.select();
                this.closePage();
            },
            addPart() {
                this.formShow = true
            },
            vendor() {
                let _this = this;
                selectAjax("post", '/buytable/vendor', {}, function (data) {
                    _this.producerTable = data.data;
                });
            },
            updateCar(i, data) {
                let _this = this;
                _this.formShow1 = true;
                _this.tableIndex = i;
                _this.lid = data[i].id;
                _this.cid = data[i].bid;
                _this.form.partName = data[i].partname;
                _this.form.producerTable_id = data[i].producerTable_id;
                _this.form.buyCount = data[i].buycount;
                _this.form.rebate = data[i].rebate;
                _this.form.costPrice = data[i].costPrice;
                _this.form.totalPrice = data[i].totalPrice;
            },
            updateForm(formName) {
                let _this = this;
                let name = localStorage.getItem("username");
                addOrUpdateAjaxNoJson("post", '/buytable/update', { partDetailChanger: name, cid: _this.cid, lid: _this.lid, costPrice: _this.form.costPrice, buyCount: _this.form.buyCount, totalPrice: _this.form.totalPrice }, function (data) {
                    _this.formShow1 = false;
                    _this.$refs[formName].resetFields();
                    _this.selectDetails();
                });
            },
            updateCode(i, data) {
                this.formShow2 = true;
                this.bid = data[i].id;
            },
            upCode() {
                let _this = this;
                let userId = localStorage.getItem("id");
                this.$confirm('是否要重新提交拟定?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    addOrUpdateAjaxNoJson("post", '/buytable/updateState2', { userId: userId, state: '2', id: _this.id, }, function (data) {
                        if (data.msg == '拟定提交') {
                            _this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                            _this.table1 = true;
                            _this.table2 = false;
                            _this.select();
                        } else {
                            _this.$message.error("服务器异常，请稍后重试");
                        }
                    })
                }).catch(() => {
                    _this.$message({
                        type: 'info',
                        message: '已取消提交'
                    });
                });

            },
            deleteCar(i, data2) {
                // 删除该零件，并删除采购中间表
                let _this = this;
                this.$confirm('是否要删除该信息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteAJAX("POST", "/buytable/deleteByidBycid", { id: data2[i].id, cid: data2[i].bid }, function (data) {
                        if (data.msg == '删除成功') {
                            data2.splice(i, 1);
                            _this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            _this.$message.error("服务器异常，请稍后重试");
                        }
                    })
                }).catch(() => {
                    _this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //查询供应商
            selectProducertableAjax() {
                let _this = this;
                selectAjax("post", '/buytable/listProducertable', { page: _this.page, limit: _this.limit }, _this.getproducerTableData);
            },
            selectProducertable() {
                let _this = this;
                this.formShow3 = true;
                _this.selectProducertableAjax();

            },

            //打开添加供应商页面
            oppenAddProducertable() {
                let _this = this;
                _this.producerTableForm = {
                    id: '',
                    producerName: '',
                    linkman: '',
                    phoneNumber: '',
                    address: '',
                    remark: ''

                },
                    _this.formShow4 = true;
                _this.producerState = 1;

            },
            oppenUpdateProducertable(i, data) {
                let _this = this;
                _this.formShow4 = true;
                _this.producerState = 2;
                _this.producerTableForm.id = data[i].id;
                _this.producerTableForm.producerName = data[i].producerName;
                _this.producerTableForm.linkman = data[i].linkman;
                _this.producerTableForm.phoneNumber = data[i].phoneNumber;
                _this.producerTableForm.address = data[i].address;
                _this.producerTableForm.remark = data[i].remark;
            },
            addProducertable(formName) {
                let _this = this;
                _this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (_this.producerState == 1) {
                            addOrUpdateAjax("post", '/buytable/addProducertable', _this.producerTableForm, function () {
                                _this.$refs[formName].resetFields();
                                _this.formShow4 = false;
                                _this.selectProducertableAjax();
                            });
                        } else if (_this.producerState == 2) {
                            addOrUpdateAjax("post", '/buytable/updateProducertable', _this.producerTableForm, function () {
                                _this.$refs[formName].resetFields();
                                _this.formShow4 = false;
                                _this.selectProducertableAjax();
                            });
                        }
                    } else {
                        return false;
                    }
                });
            },
            deleteProducertable(i, dataForm) {
                // 删除该零件，并删除采购中间表
                let _this = this;
                this.$confirm('是否要删除该信息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteAJAX("POST", "/buytable/deleteProducertable", { id: dataForm[i].id }, function (data) {
                        if (data.msg == '删除成功') {
                            dataForm.splice(i, 1);
                            _this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            _this.$message.error("服务器异常，请稍后重试");
                        }
                    })
                }).catch(() => {
                    _this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            }

        },
        mounted() {
            this.vendor();
            this.select();
        }
    })
</script>

</html>